<template>
  <div class="my-collection-special collection">
    <van-tabs
      class="my-tab"
      title-active-color="var(--text-black)"
      title-inactive-color="var(--text-black)"
      animated
      lazy-render
      v-model="active"
    >
      <van-tab title="分组" replace to="/collection/cgroup"></van-tab>
      <van-tab title="菜谱" replace to="/collection/crecipe"></van-tab>
      <van-tab title="笔记" replace to="/collection/cnotes"></van-tab>
      <van-tab title="课程" replace to="/collection/cclass"></van-tab>
    </van-tabs>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      nowCatch: "cgroup",
      value: "",
      active: 0,
    };
  },
  methods: {
    toLinkView() {
      let url = "";
      switch (this.active) {
        case 0:
          url = "/collection/cgroup";
          break;
        case 1:
          url = "/collection/crecipe";
          break;
        case 2:
          url = "/collection/cnotes";
          break;
        case 3:
          url = "/collection/cclass";
          break;
      }
      if (this.$route.path == url) return;
      this.$router.push(url);
    },
  },
  activated() {
    this.toLinkView();
  },
};
</script>

<style lang="scss" scoped>
.collection {
  width: 100%;
}
</style>
<style lang="scss">
.my-collection-special {
  position: relative;
  min-height: 100vh;
  background-color: var(--bgc-gray2);
  .my-tab {
    position: sticky;
    top: 0;
    left: 0;
    height: 0.5rem;
    background-color: var(--text-white);
    z-index: 100;
    // div {
    //   height: 100%;
    // }
  }
  .van-tab {
    height: 0.5rem;
    min-height: 0.5rem;
    transition: 0.5s;
    font-size: 0.16rem;
    line-height: 0.25rem;
  }
  .van-tab--active {
    // font-size: 0.25rem;
    font-weight: bold;
  }
  .van-tabs__line {
    height: 0.03rem !important;
    background-color: var(--bgc-yellow) !important;
  }
}
</style>